<template>
  <div class="nav_bar" :style="{ opacity }">
    <font-awesome-icon :icon="['fas', 'angle-left']" class="angle-left" @click="handleBack"/>
    <div class="title">{{ title }}</div>
  </div>
</template>

<script setup>
import { onBeforeMount, onBeforeUnmount, onMounted } from "vue";
import { useRouter } from "vue-router";
const router = useRouter()
const $props = defineProps({
  title: {
    type: String,
    require: true,
  },
});
const opacity = ref(0);
onMounted(() => {
   window.addEventListener("scroll",handleSlidebar)
});
function handleSlidebar() {
    if (window.scrollY < 250) {
      opacity.value = window.scrollY / 250;
      // console.log(2)
    } else {
      opacity.value = 1;
      // console.log(3)
    }
}
onBeforeUnmount(() => {
  window.removeEventListener('scroll',handleSlidebar)
})
function handleBack() {
  router.back()
}
</script>

<style lang="scss" scoped>
.nav_bar {
  position: fixed;
  display: flex;
  width: 100%;
  height: 50px;
  background-color: #652e80b1;
  line-height: 50px;
  align-items: center;
  .angle-left {
    color: #eee;
    margin-left: 20px;
    font-size: 23px;
    cursor: pointer;
  }
  .title {
    flex: 1;
    display: flex;
    justify-content: center;
    padding-right: 20px;
    font-size: 17px;
    font-weight: 600;
  }
}
</style>
